<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>v-if实现</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            img{
                width: 100px;
            }
        </style>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="root">
			<button @click="changeWeather">切换天气</button>
			<h2>今天天气很{{text}}</h2>

			<div v-if="isHot === 0">
				<img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" alt=""><br/>
				<span>建议：心静自然凉</span>
			</div>

			<div v-else-if="isHot === 1" >
				<img src="https://img0.baidu.com/it/u=2181452007,1100013642&fm=26&fmt=auto&gp=0.jpg" alt=""><br/>
				<span>建议：不冷不热就好好学习吧</span>
			</div>

			<div v-else="isHot === 2">
				<img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" alt=""><br/>
				<span>建议：穿好你秋裤</span>
			</div>

		</div>
    </body>
        <script type="text/javascript">
            Vue.config.productionTip = false
            // new Vue({
            //     el:'#root',
            //     data:{
            //         isHot:0
            //     },
            //     computed:{
            //         text(){
            //             if(this.isHot === 0) return '炎热'
            //             else if(this.isHot === 1) return '温暖'
            //             else return '凉爽'
            //         }
            //     },
            //     methods: {
            //         changeWeather(){
            //             this.isHot += 1
            //             if(this.isHot > 2) this.isHot = 0
            //         }
            //     },
            // })
            new Vue({
                el:'#root',
                data:{
                    isHot:0
                },
                computed:{
                    text(){
                        if(this.isHot === 0) return '炎热'
                        else if(this.isHot === 1) return '温暖'
                        else return '凉爽'
                    }
                },
                methods: {
                    changeWeather(){
                        this.isHot += 1
                        if(this.isHot > 2) this.isHot = 0
                    }
                },
            })
        </script>
</html>